<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="wrap">
        <button class="btn1">新增</button>
        <button class="btn2">删除</button>
        <ul class="list">
            <li class="first">1</li>
            <li>2</li>
            <li class="mid">3</li>
            <li>4</li>
            <li>5</li>
            <li class="last">6</li>
        </ul>
    </div>
</body>
<script>
    // 节点
    // 文档节点  元素节点 属性节点 文本节点 注释节点


    // 总结
    // document.getElementsByClassName()   parentElement.getElementsByClassName()
    // document.getElementsByTagName()      parentElement.getElementsByTagName()
    // document.getElementsByName()  

    //  上述方法获取的元素集合 会随页面回流,自动更新 => 如果存在 同类型(tagName) 同类名(class)  同名(name) 的元素增加或减少 => 自动更新引用的集合(集合的引用内存更新)

    // document.querySelectorAll()  
    // 上述方法获取的元素集合 => 已经获取,集合不在更改 => 同类型(tagName) 同类名(class)  同名(name) 的元素增加或减少 都不会对集合造成影响


    // 如果需要获取的元素存在增删改等情况 => 第一种
    // 如果获取的元素始终不变 => 两种都可以

    var ul = document.getElementsByClassName("list")[0];
    var mid = document.getElementsByClassName("mid")[0];
    var btn1 = document.getElementsByClassName("btn1")[0];
    var btn2 = document.getElementsByClassName("btn2")[0];

    var liListA = ul.getElementsByTagName("li");
    var liListB = ul.querySelectorAll("li");


    // 点击按钮  新增一个li  放到.list中  => 最后面
    btn1.onclick = function(){
        var li =  document.createElement("li");
 
        li.innerText = "我是新增的li";
        li.style.width = Math.round(Math.random()*100 + 50) + "px";
        li.style.height = Math.round(Math.random()*100 + 50) + "px";
        li.style.backgroundColor = randColor();
        li.onclick = function(){
            console.log(this);
        }
        ul.appendChild(li);

        console.log("liListA:",liListA);
        console.log("liListB:",liListB);
    }

    btn2.onclick = function(){
        ul.lastElementChild.remove();
        console.log("liListA:",liListA);
        console.log("liListB:",liListB);
    }




    function randColor() {
        var str = "0123456789abcdef";

        var colorStr = "#";
        for (var i = 0; i < 6; i++) {
            var index = Math.floor(Math.random() * str.length);
            var char = str.charAt(index);
            colorStr += char;
        }
        return colorStr;
    }



</script>

</html>